<template >
  <div class="container">
    <div class="rightBox">
      <img  :src="fileUrl" alt="头像" />
      <p>{{username || '未登录'}}</p>&nbsp;
      <p @click="goOutLogin">退出登录</p>
    </div>
  </div>
</template>
<script>

import { useRouter } from "vue-router";
import axios from "@/axios";
import { ref, onMounted } from "vue";
import eventFun from "@/eventFun";
export default {
  setup(props) {

    let router = useRouter();
    let username = ref(null);
    let fileUrl = ref("");
    username.value = localStorage.getItem("username") || undefined;
    onMounted(() => {
      eventFun.on((str) => {
        getUserInfo();
        console.log(str);
      }, "changeUsernameP");
      getUserInfo();
    });
    const getUserInfo = () => {
      localStorage.getItem("uuid")
        ? axios
            .get("user/queryId", { uuid: localStorage.getItem("uuid") })
            .then(res => {
              fileUrl.value = res.data[0]?.fileUrl
                ? "http://127.0.0.1:3003/" + res.data[0].fileUrl
                : "https://img0.baidu.com/it/u=860812239,2660557779&fm=26&fmt=auto&gp=0.jpg";
            })
        : "";
    };
    const goOutLogin = () => {
      localStorage.clear();
      router.push("/login");
    };
    // const stopUpDownFun = stopUpDown.stopUpDown(goOutLogin,2000)
    // return { username, fileUrl, goOutLogin ,stopUpDownFun};
    return { username, fileUrl, goOutLogin };
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .rightBox {
    float: right;
    width: 300px;
    height: 60px;
    display: flex;
    line-height: 60px;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 30px;
    }
    p {
      font-size: 24px;
    }
  }
}
</style>